﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=1">
    <meta name="format-detection" content="telephone=no">
    <meta charset="UTF-8">
    <title>vue-router之实例操作新闻列表单页面应用与路由别名的使用</title>
    <link href="../css/bootstrap.css"/>
    <link href="../css/bootstrap-theme.css"/>
</head>
<body>
    <h1>vue-router之实例操作新闻列表单页面应用与路由别名的使用</h1><br/>

    <div id="app">
        <router-view></router-view>
    </div>
<script src="../js/jquery-2.2.0.min.js"></script>
<script src="../js/vue-2.5.16.js"></script>
<script src="../node_modules/axios/dist/axios.js"></script>
<script src="../node_modules/lodash/lodash.js"></script>
<script src="../node_modules/vue-router/dist/vue-router.js"></script>

    <script type="text/x-template" id="main">
        <div>
            这是我的主页路由
            <ul>
                <li v-for="v in arr"><router-link :to="{name:'content',params:{id:v.id}}">{{v.title}}</router-link></li>
            </ul>
        </div>
    </script>

    <script type="text/x-template" id="result">
        <div>
            这是我的结果路由
            <h3>我的标题为  {{obj.title}}</h3>
            <h3>我的内容为  {{obj.content}}</h3>
        </div>
    </script>

<script>
    let data = [
        {id:0,title:'标题1',content:'内容1'},
        {id:1,title:'标题2',content:'内容2'},
        {id:2,title:'标题3',content:'内容3'}
    ];
    let main = {
        template:'#main',
        data(){
            return {
                arr:data
            }
        }
    };
    let result = {
        template:'#result',
        data(){
            return {
                obj:{}
            }
        },
        mounted(){
            //挂载的时候取页面参数id
            this.obj = data[this.$route.params.id];//这里的data数据将来会放在store里。这里写的时候先写全局的吧。然后这里id是从0开始的，正好是数组下标0开始
        }
    };

    let route = new VueRouter({
        routes:[
            {
                path:'/',
                component:main,
                name:'main'
            },
            {
                path:'/content',
                component:result,
                name:'content'
            }
        ]
    });

    //根
    var app = new Vue({
        el:'#app',
        router:route,
        data:{
        }
    });
</script>

</body>
</html>